<template>

  <div>
    <el-container style="height: 100vh;">
      <template v-if="isLoggedIn">
      <el-aside>
         <div style="display: flex; justify-content: center; margin-top: 50px;">
        <el-avatar
          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
          style= "height: 70px ; width:70px ">
        </el-avatar>
         </div>
       <div style="display: flex; justify-content: center; margin-top: 30px; margin-bottom: 30px; font-size:20px; color:white">你好，admin！</div>
        <el-menu :default-active="sidebarContent" class="el-menu-vertical-demo">
          <el-menu-item index="/home" @click="navigateToHome">
            <template slot="title" >
              
              <i class="el-icon-warning" ></i>
              
               <span class="custom-slot-font">首页</span>
              </template>
             
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              
              <i class="el-icon-user-solid" ></i>
              
              <span class="custom-slot-font">系统管理</span>
            </template>
            <el-menu-item index="2-1"><a href="#/user">用户与权限管理</a></el-menu-item>
            <el-menu-item index="2-2"><a href="#/log">操作日志</a></el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              
              <i class="el-icon-s-order" ></i>
              
             <span class="custom-slot-font">排产输入信息管理</span>
            </template>
            <el-menu-item index="3-1"><a href="#/worker">人员信息管理</a></el-menu-item>
            <el-menu-item index="3-2"><a href="#/craft">工艺信息管理</a></el-menu-item>
            <el-menu-item index="3-3"><a href="#/equipment">设备信息管理</a></el-menu-item>
            <el-menu-item index="3-4"><a href="#/instrument">工装信息管理</a></el-menu-item>
            <el-menu-item index="3-5"><a href="#/quality">质量信息管理</a></el-menu-item>
            <el-menu-item index="3-6"><a href="#/plan">主计划信息</a></el-menu-item>
            <el-menu-item index="3-7"><a href="#/exception">异常信息管理</a></el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              
              <i class="el-icon-s-promotion" ></i>
              
            <span class="custom-slot-font">前摄性评估模块</span>
            </template>
            <el-menu-item index="4-1"><a href="#/plan">物料齐套性评估</a></el-menu-item>
            <el-menu-item index="4-2"><a href="#/schedule">装配进度评估</a></el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              
              <i class="el-icon-s-claim" ></i>
              
             <span class="custom-slot-font">生产计划管理</span>
              </template>
            <el-menu-item index="5-1"><a href="#/generatingplan">生产计划生成</a></el-menu-item>
            <el-menu-item index="5-2"><a href="#/searchplan">计划查询</a></el-menu-item>
            <el-menu-item index="5-3"><a href="#/generatingschedule">生产调度</a></el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
    <el-container>
      <el-header style=" display:flex; align-items: center; justify-content: center; margin-top:80px; padding-bottom: 80px;  position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.1); ">
          <el-button  v-if="showBackButton"  type="primary"  style="position: absolute; top: 100px; left: 20px; background-color: #035ab1;" @click="goBack">
          返回上一级
          </el-button>
        <img src="./assets/航空工业.jpeg" alt="logo" style="height: 100px;margin-left: 300px ;margin-right: 35px;" />
        <span >直升机结构装配前摄性动态排产软件</span>
        <el-dropdown style="margin-left: auto; margin-right: 35px; font-size:40px; ">
          <i class="el-icon-setting" ></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </el-header>
      
      <el-main style="  display:flex;  justify-content: center; width:100%">
        
        <div style="width: 100%; max-width: 1200px; text-align: center;">

          <router-view>
          </router-view>
        </div>
        
      </el-main>
    </el-container>
      </template>
      <template v-else>
        <login @login-success="handleLoginSuccess"></login>
      </template>
      
    </el-container>
    
  </div>
</template>

<script>
import Login from './views/Login.vue';

export default {
  watch: {
  '$route'(to, from) {
    this.checkRoute();
  }
},
  components: {
    Login
  },
  data() {
    return {
      sidebarContent: '', // 用于存储当前展开的侧边栏内容
      isLoggedIn: false,  // 登录状态
      showBackButton: true,
    };
  },
  created() {
  this.checkRoute();
},
  methods: {
    checkRoute() {
    if (this.$route.path === '/home') {
      this.showBackButton = false;
    } else {
      this.showBackButton = true;
    }
  },
    navigateToHome() {
    const currentPath = this.$route.path;
    const targetPath = '/home';

    // 仅在当前路径与目标路径不同时进行导航
    if (currentPath !== targetPath) {
      this.$router.push(targetPath);
    }
  },
     goBack() {
     this.$router.go(-1); // 返回上一级
     

    if (currentPath !== targetPath) {
      this.$router.push(targetPath);
    }
      },
    toggleSidebar(content) {
     
      if (this.sidebarContent === content) {
        this.sidebarContent = '';
      } else {
        this.sidebarContent = content;
      }
    },
    navigateTo(path) {
      this.$router.push(path); // 跳转到指定路径
    },
    handleLoginSuccess() {
      this.isLoggedIn = true;
      const currentPath = this.$route.path;
    const targetPath = '/home';
     if (currentPath !== targetPath) {
      this.$router.push(targetPath);
    }
    },
    logout() {
    
      localStorage.removeItem('token'); // 或其他存储登录状态的方式
      this.$router.push('/login').catch(err => {
        console.log('Navigation error:', err);
      });
    },
  },
  name: 'App',
};
</script>


<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
 .custom-icon{
  size: 30px;
  color: white;
 }
.el-menu-vertical-demo .el-menu-item:hover,
.el-menu-vertical-demo .el-submenu__title:hover {
  background-color: #1d1560;
  color: white; /* 可选：改变字体颜色为白色 */
}

.custom-slot-font {
  font-family: '微软雅黑', sans-serif;
  font-weight: bold;
  font-size: 23px;
  color: white; /* 颜色示例 */
  text-align: left;
}
.custom-slot-font:hover{
  background-color: #1d1560;
}
.el-aside { 
  background-color: #02478e;
}


.el-submenu{
    color: white;
    background-color: #02478e;
    font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    font-size: 20px;
    text-align: left;
}
.el-submenu:hover{
  background-color: #1d1560;
}
.el-menu-item{
  color: white;
  background-color: #02478e;
}
.el-menu-item a {
  
  color: white;
  text-decoration: none;
  font-size:20px;
  text-align: left;
}
.el-header{
  margin-top: 30px;
  font-family:  '微软雅黑', sans-serif;
  color: #02478e;
  font-size: 40px;
  font-weight: bold;
  margin-bottom:30px;
  

}
.el-menu-item::before,
.el-submenu__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background-color: white;
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.el-menu-item:hover::before,
.el-submenu__title:hover::before {
  transform: scaleY(1);
}

.el-header {
  margin-top: 30px;
  font-family: '微软雅黑', sans-serif;
  color: #02478e;
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 30px;
}


</style>